<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
    <style>
        .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
        transition: all 0.4s ease;
    }
    .v-move{
        transition: all 0.6s ease;
    }
    .v-leave-active{
        position: absolute;
    }
    </style>
</head>

<body>
    <div id="app">

        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <input type="button" value="toggle" @click="add" />

        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.id}}---{{item.name}}
            </li>

        </transition-group>

    </div>


    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false,
                id: "",
                name: "",
                list: [
                    { id: 0, name: "张三" },
                    { id: 1, name: "李四" }
                ]

            },
            methods: {
                add() {
                    this.list.push({ id: this.id, name: this.name });
                    this.id = this.name = "";
                },
                del(i) {
                    this.list.splice(i, 1);
                }

            }
        })
    </script>
</body>

</html>